<template>
  <BorderBox10 class="h-full">
    <div class="gap-3 p-4 h-full">
      <div class="flex w-full flex-col justify-between ">
        <Title class="pt-2" :title="title"></Title>
        <div class="w-full max-h-72 mt-10 overflow-y-auto">
          <div v-for="(item, index) in list"
               :key="index" class="list px-6 text-slate-300 flex justify-between text-base h-full leading-10 "
          >
            <p class="col-span-3">{{ item.username }}</p>
            <p class="text-[#00FFFF]">{{ item.count }}</p>
          </div>
        </div>
      </div>

    </div>
  </BorderBox10>
</template>

<script setup>
import { BorderBox10, Decoration8 } from '@kjgl77/datav-vue3'
import { defineProps } from 'vue'
import Title from '@/view/memberManager/components/title.vue'
const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  title: {
    type: String,
    default: ''
  }
})

</script>


<style scoped>
.list {
  border-bottom: 1px solid #53749C;
}
</style>
